前言

大家好，歡迎來到第二天！

在 Day 1，我們確立了「省錢拍拍 SnapSaver」這個專案的願景與技術藍圖。俗話說「工欲善其事，必先利其器」，今天我們的核心任務，就是將開發 Flutter App 所需的十八般武藝全部準備齊全。

一個順暢的開發環境，是快樂寫碼的泉源。接下來我們會一步步完成所有設定。這個過程可能會有些繁瑣，不過這是奠定未來 28 天高校開發的基石。

本文會以 Windows 作業系統為主。macOS 操作上會有些許差異

必備工具清單

我們要安裝的軟體主要包含以下幾項：

1. Git: 版本控制工具
2. Flutter SDK: 開發 Flutter 應用的核心套件
3. Android Studio: 管理 Android SDK 與模擬器
4. Visual Studio Code (VS Code)：我們本次專案主要使用的程式碼編輯器。

Step 1: 安裝 Flutter SDK

1. 前往官網：進入 Flutter 官方網站，點擊 "Get started"。
2. 下載 SDK：根據你的作業系統（Windows/macOS），下載最新穩定版（Stable channel）的 Flutter SDK 壓縮檔。
3. 解壓縮與放置：
   • 將解壓縮後的 flutter 資料夾，放置到一個不需系統管理員權限的路徑，例如 C:\dev\flutter。切勿放在 C:\Program Files\ 這類需要高權限的目錄。
4. 設定環境變數 (至關重要！)
   這一步是為了讓你的電腦終端機（Terminal/CMD）能辨識 flutter 這個指令。

• windows:
  1. 在開始功能表搜尋列輸入「env」或「環境變數」。
  2. 選擇「編輯系統環境變數」。
  3. 在彈出視窗中點擊「環境變數...」。
  4. 在「使用者變數」區塊，找到 Path 變數，點擊「編輯」。
  5. 點擊「新增」，並將你剛剛放置 Flutter 的路徑加上 \bin 貼上，例如：C:\src\flutter\bin。
  6. 一路按下「確定」關閉所有視窗。
  7. 如下圖所示

完成後，重開一個新的終端機視窗，輸入 flutter --version，如果能看到版本號 (如下圖)，恭喜你，第一步成功了！

Step 2: 神醫指令 flutter doctor

Flutter 提供了一個極其強大的診斷工具：flutter doctor。它會檢查你的環境，並告訴你還缺少哪些東西。

在終端機輸入：

flutter doctor

會看到類似下圖的畫面，其中 [✓] 代表正常，[✗] 代表需要修復。

Step 3: 安裝 Android Studio 與 Android SDK

1. 下載安裝：從 Android 開發者官網下載並安裝 Android Studio。
2. 首次啟動設定：打開 Android Studio，它會引導你安裝 Android SDK、Command-line Tools 等必要元件，一路選擇預設選項即可。
3. 同意 Android 授權：安裝完畢後，回到終端機，執行 flutter doctor 可能會提示你授權未同意。執行以下指令並全部輸入 y 即可：

flutter doctor --android-licenses

Step 4: 安裝 VS Code 與 Flutter 擴充套件

1. 安裝 VS Code：前往 VS Code 官網下載並安裝。
2. 安裝擴充套件：
   1. 打開 VS Code。
   2. 點擊左側邊欄的擴充套件圖示 (Extensions)。
   3. 搜尋「Flutter」。
   4. 點擊由 Dart Code 發布的 Flutter 擴充套件並安裝。它會自動一併安裝 Dart 擴充套件。
   5. 再次搜尋「Chinese (Traditional) Language」。
   6. 安裝 中文 (繁體) 語言套件，讓 VS Code 提供本地化的使用者介面。
   7. 關掉 VSCODE 重開。

最終驗收

再次於終端機輸入：

flutter doctor

理想情況下，應該會看到所有項目都打上綠色的 [✓]。

最後一步，跑個範例專案!

1. 打開 VSCODE，切換到想要放置專案的資料夾，執行：

flutter create my_first_app

2. 進入專案資料夾：

cd my_first_app

3. 確保模擬器(Android)已經開啟：

模擬器可以點選 VSCODE 右下角，選擇開啟。

模擬器開啟完後就會長下方圖片這個樣子

執行：

flutter run

就可以在模擬器上看到下方圖片中 Flutter 的經典計數器 App。如果成功了，恭喜，開發環境已大功告成!

今日結語

環境設定是整個開發旅程中最容易遇到問題、也最消磨耐心的環節。如果你今天順利完成了，請給自己一個大大的鼓勵！如果遇到了問題，別氣餒，試著將 flutter doctor 的錯誤訊息貼到 Google 搜尋，通常都能找到解答。

明天開始，我們會先介紹 Flutter 背後的功臣 -- Dart 語言